<template>
  <section class="child_report-box who_feed_print">
    <div class="child_report_header">
      <div class="child_myself">
        <div class="child-my_item" style="width:20%;">
          <span>姓名</span>
          {{detail.name}}
        </div>
        <div class="child-my_item">
          <span>年龄</span>
          {{detail.age}}岁{{detail.sdfMonth}}月{{detail.sdfDay}}天
        </div>
        <div class="child-my_item">
          <span>性别</span>
          {{detail.sex | toSex}}
        </div>
      </div>
      <div class="child_myself">
        <div class="child-my_item" style="width:20%;">
          <span>联系电话</span>
          {{detail.mobile}}
        </div>
        <div class="child-my_item">
          <span>联系地址</span>
          {{detail.address}}
        </div>
      </div>
    </div>
    <div class="child_report_content">
      <div class="project-item">
        <div class="pro_title">
          <span>基础检查</span>
        </div>
        <div class="pro_item-content">
          <div class="pro_item_box">
            <div class="pro_item">
              <span>身高</span>
              <label v-if="signForm">{{signForm.height}}</label> CM
            </div>
            <div class="pro_item">
              <span>身高评价</span>
              P20-50
            </div>
          </div>
          <div class="pro_item_box">
            <div class="pro_item">
              <span>体重</span>
              <label v-if="signForm">{{signForm.weight}}</label>KG
            </div>
            <div class="pro_item">
              <span>身高评价</span>
              P20-50
            </div>
          </div>
          <div class="pro_item_box">
            <div class="pro_item">
              <span>胸围</span>
              CM
            </div>
            <div class="pro_item">
              <span>身高/体重评价</span>
              P20-50
            </div>
          </div>
          <div class="pro_item_box">
            <div class="pro_item">
              <span>呼吸</span>
              <label v-if="signForm">{{signForm.breathing}}</label>次/分钟
            </div>
            <div class="pro_item">
              <span>脉搏</span>
              <label v-if="signForm">{{signForm.pulse}}</label>次/分钟
            </div>
          </div>
          <div class="pro_item_box">
            <div class="pro_item">
              <span>体温</span>
              <label v-if="signForm">{{signForm.weight}}</label>℃
            </div>
          </div>
        </div>
      </div>
      <div class="project-item">
        <div class="pro_title">
          <span>体格检查</span>
        </div>
        <div class="pro_item-content">
          <div class="pro_item_box">
            <div v-for="(item,index) in infos" :key="index" class="pro_item">
              <span>{{item.attrName}}</span>
              {{item.values}}{{item.attrUnit}}
            </div>
            <!-- <div class="pro_item">
              <span>心（听诊）</span>
              心音有力、心律整、未及明显杂音
            </div>-->
          </div>
          <!-- <div class="pro_item_box">
            <div class="pro_item">
              <span>眼睛</span>
              外观未见异常
            </div>
            <div class="pro_item">
              <span>肺（听诊）</span>
              双肺呼吸音清
            </div>
          </div>
          <div class="pro_item_box">
            <div class="pro_item">
              <span>耳</span>
              未见异常
            </div>
            <div class="pro_item">
              <span>肝（听诊）</span>
              未及异常
            </div>
          </div>
          <div class="pro_item_box">
            <div class="pro_item">
              <span>鼻</span>
              未见异常
            </div>
            <div class="pro_item">
              <span>脾（肋下）</span>
              未及异常
            </div>
          </div>
          <div class="pro_item_box">
            <div class="pro_item">
              <span>口腔</span>
              口腔黏膜光滑
            </div>
            <div class="pro_item">
              <span>骨骼</span>
              未见异常
            </div>
          </div>
          <div class="pro_item_box">
            <div class="pro_item">
              <span>腮腺</span>
              未见异常
            </div>
            <div class="pro_item">
              <span>胸廓</span>
              漏斗胸
            </div>
          </div>
          <div class="pro_item_box">
            <div class="pro_item">
              <span>颈部</span>
              未见异常
            </div>
            <div class="pro_item">
              <span>腹部</span>
              腹平软
            </div>
          </div>
          <div class="pro_item_box">
            <div class="pro_item">
              <span>浅表淋巴结</span>
              无肿大
            </div>
            <div class="pro_item">
              <span>肛门</span>
              未见异常
            </div>
          </div>
          <div class="pro_item_box">
            <div class="pro_item">
              <span>脊柱</span>
              无畸形
            </div>
            <div class="pro_item">
              <span>外生殖器</span>
              双睾降，包茎
            </div>
          </div>-->
        </div>
      </div>
      <div class="project-item">
        <div class="pro_title">
          <span>视力检查</span>
        </div>
        <div class="pro_item-content">
          <div class="pro_item_box">
            <div class="pro_item">
              <span>左眼</span>
              <label v-if="signForm">{{signForm.leftEye}}.0</label>
            </div>
            <div class="pro_item">
              <span>左耳</span>
              正常
            </div>
          </div>
          <div class="pro_item_box">
            <div class="pro_item">
              <span>右眼</span>
              <label v-if="signForm">{{signForm.rightEye}}.0</label>
            </div>
            <div class="pro_item">
              <span>右耳</span>
              正常
            </div>
          </div>
        </div>
      </div>
      <div class="project-item">
        <div class="pro_title">
          <span style="top:7%;">睡眠检查</span>
        </div>
        <div class="pro_item-content">
          <div class="pro_item_box" style="text-indent:10px;">正常</div>
        </div>
      </div>
      <div style="border-bottom:1px solid #ddd;" class="project-item">
        <div class="pro_title">
          <span style="top:7%;">化验报告</span>
        </div>
        <div class="pro_item-content">
          <div class="pro_item_box" style="text-indent:10px;">正常</div>
        </div>
      </div>
    </div>
    <iframe
      v-show="showReport"
      frameborder="0"
      height="0px"
      width="0px"
      ref="iframe"
      src="/print/report.html"
    ></iframe>
    <div>
      <el-button class="btn_report" @click="printReport()">打印健康报告</el-button>
      <el-button @click="onReturn">返回</el-button>
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      detail: "",
      ispersonal: false,
      showReport: false,
      signForm: "",
      infoList: [],
      infos: [],
      iframeContent: {},
      nums: 0
    };
  },
  mounted() {
    let th = this;
    th.findUsUserById();
    th.findListByCategoryId();
    th.getExaminNums();
  },
  methods: {
    findUsUserById() {
      let th = this;
      th.iframeContent = this.$refs.iframe.contentWindow;
      th.verifyUrlAttack(th.$route.query).then(() => {
        let uid = th.jieMi(th.$route.query.id);
        th.$api
          .getThePatientLibraryById({ patientId: uid, hpId: th.adminUser.hpId })
          .then(res => {
            if (res.executed) {
              let _detail = {
                levelProjectRelation: [
                  { projectId: 1, discount: 100 },
                  { projectId: 2, discount: 100 },
                  { projectId: 3, discount: 100 },
                  { projectId: 4, discount: 100 },
                  { projectId: 5, discount: 100 },
                  { projectId: 6, discount: 100 }
                ]
              };
              _detail = Object.assign(_detail, res.thePatientLibraryDetail);
              if (_detail.labelIds != "" && _detail.labelIds != undefined) {
                _detail.labelIds = _detail.labelIds.split(",");
              }
              th.$api.getPatientSignById({ patientId: uid }).then(res => {
                if (res.executed) {
                  th.signForm = res.patientSign;
                }
              });
              th.active = true;
              th.ispersonal = false;
              th.detail = _detail;
            }
          });
      });
    },
    onReturn() {
      let th = this;
      let j = {};
      if (th.$route.query.id != null) {
        j = {
          id:th.$route.query.id
        };
      } else {
        j = {
          id: th.jiaMi(0)
        };
      }
      th.$router.push({
        path: "/page/userDetail",
        query: th.getUrlToken(j)
      });
    },
    findListByCategoryId() {
      let th = this;
      th.$api
        .findListByCategoryId({ isOnlyRoot: "T", categoryId: "1000160002" })
        .then(res => {
          if (res.executed) {
            let list = res.infos;
            let data = [];
            for (let i = 0; i < list.length; i++) {
              let arr = {};
              Object.assign(arr, list[i]);
              arr.values = "";
              data.push(arr);
            }
            th.infoList = data;
          }
        });
    },
    getExaminNums() {
      let th = this;
      th.$api
        .getExaminationNums({
          patientId: th.jieMi(th.$route.query.id),
          sort: "F"
        })
        .then(res => {
          if (res.executed) {
            th.nums = Number(res.infos.length);
            th.getExamList();
          }
        });
    },
    getExamList() {
      let th = this;
      th.$api
        .getExaminationNums({
          patientId: th.jieMi(th.$route.query.id),
          nums: th.nums,
          isOnlyRoot: "F"
        })
        .then(res => {
          let info = res.infos[0].values;
          let infoList = th.infoList;
          let list = [];
          for (let j = 0; j < infoList.length; j++) {
            let arr = {};
            for (let i = 0; i < info.length; i++) {
              if (info[i].attrId == infoList[j].id) {
                Object.assign(arr, infoList[j]);
                if (arr.attrType == "SELECT") {
                  arr.values = info[i].values2;
                } else {
                  arr.values = info[i].values;
                }
              }
            }
            list.push(arr);
          }
          th.infos = list;
        });
    },
    printReport() {
      let th = this;
      th.iframeContent.postMessage(
        {
          cmd: "postJson",
          params: JSON.stringify({
            signForm: th.signForm,
            detail: th.detail,
            infos: th.infos,
            hospitalName: th.adminUser.hospitalName
          })
        },
        "*"
      );
      th.showReport = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.child_report-box {
  display: inline-block;
  width: 100%;
  padding: 0px !important;
  margin-bottom: 20px;
  border: 1px solid #ddd;
}
.child_myself {
  display: inline-block;
  width: 100%;
  border-bottom: 1px solid #ddd;
  margin-bottom: -1px;
  .child-my_item {
    display: inline-block;
    width: 40%;
    line-height: 45px;
    border-right: 1px solid #ddd;
    span {
      width: 31%;
      display: inline-block;
      border-right: 1px solid #ddd;
      text-align: center;
      margin-right: 5px;
    }
  }
  .child-my_item:last-child {
    border-right: 0px;
  }
}
.child_report_content {
  margin-top: 20px;
  // border-top: 1px solid #ddd;
}
.project-item {
  line-height: 45px;
  position: relative;
  .pro_title {
    float: left;
    display: inline-block;
    text-align: center;
    width: 7%;
    border-right: 1px solid #ddd;
    margin-right: -1px;
    border-bottom: 1px solid #ddd;
    span {
      position: absolute;
      top: 40%;
      left: 25px;
    }
  }
  .pro_item-content {
    width: 93%;
    display: inline-block;
    border-top: 1px solid #ddd;
    margin-bottom: -1px;
    border-left: 1px solid #ddd;
    .pro_item_box {
      width: 100%;
      display: inline-block;
      border-bottom: 1px solid #ddd;
      .pro_item {
        width: 50%;
        display: inline-block;
        border-bottom: 1px solid #ddd;
        margin-bottom: -1px;
        border-right: 1px solid #ddd;
        span {
          width: 20%;
          margin-right: 10px;
          text-align: center;
          display: inline-block;
          border-right: 1px solid #ddd;
        }
      }
      .pro_item:last-child {
        // border-right: 0px;
        border-bottom: 0px;
      }
    }
  }
}
.project-item:last-child {
  .pro_item_box {
    border-bottom: 0px;
  }
}
.btn_report {
  margin: 20px 0px 20px 20px;
}
</style>